<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/Width.js" type="text/javascript" charset="utf-8"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/address.css" />

	</head>

	<body style="background-color: #F4F4F4;">
		<!--
        	作者：1169774483@qq.com
        	时间：2018-06-08
        	描述： 通讯录
        -->
		<div id="address">
			<div v-show="loadings" class='loadings'>
				<div class='line-scale-pulse-out'>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
			<header class="mui-bar mui-bar-nav">
				<a style="color: #fff;" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title" style="color: #fff;">通讯录</h1>
			</header>
			<div class="content">
				<div class="search bottom-underline">
					<div class="mui-input-row mui-search">
						<input type="search" v-model="search" class="mui-input-clear" placeholder="搜索" @keyup.13="searchClick(search)">
					</div>
				</div>
				<div v-show="reminder" class="searchlistText">您搜索的用户查找不到...</div>
				<div class="address-wapper" v-for="item in addressList">
					<div class="title">{{item.postName}}</div>
					<div class="list-item bottom-underline" v-for="son in item.employeeList" :style="son.sate?'height:5.12rem':'height: 1.6rem;'">
						<div class="desc flex-between" @click="examineClick(son.userID)">
							<div class="head-img flex-between">
								<img :src="son.empImg||'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529382604731&di=6e0415e1f41804a3420d09112f0b9f67&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F48%2F88%2F2757444507812f6.jpg'" />
								<span>{{son.empName}}</span>
							</div>
							<span style="color: #ABABAB;" v-if="son.sate" class="mui-icon mui-icon-arrowup"></span>
							<span style="color: #ABABAB;" v-else class="mui-icon mui-icon-arrowdown"></span>
						</div>
						<ul class="mui-table-view desc-inof">
							<li class="mui-table-view-cell list-item flex-between">
								<span class="text" style="color: #3E3E3E;">性别</span>
								<span class="text" style="color: #919191;">{{son.employeeDetails.empSex}}</span>
							</li>
							<li class="mui-table-view-cell list-item flex-between" @click="goiponeClick(son.empName,son.employeeDetails.empPhoneNumber)">
								<span class="text" style="color: #3E3E3E;">手机</span>
								<span class="text" style="color: #357AFF;">{{son.employeeDetails.empPhoneNumber||'暂无'}}</span>
							</li>
							<li class="mui-table-view-cell list-item flex-between" @click="goiponeClick(son.empName,son.employeeDetails.empTelephone)">
								<span class="text" style="color: #3E3E3E;">座机</span>
								<span class="text" style="color: #357AFF;">{{son.employeeDetails.empTelephone||'暂无'}}</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			var address = new Vue({
				el: '#address',
				data: {
					search: '',
					reminder: false,
					addressList: [],
					searchList: [],
					sateText: false,
					loadings: true
				},
				watch: {
					search: function(text) {
						this.GetLinkMan(text)
					}
				},
				created: function() {
					this.GetLinkMan()
				},
				methods: {
					searchClick: function(e) {
						e != '' ? this.GetLinkMan(e) : mui.toast('请输入内容')
					},
					GetLinkMan: function(text) {
						var that = this
						mui.post(httpUrl.testUrl + '/api/Users/GetLinkMan', {
							empName: text ? text : ''
						}, function(res) {
							if(res.code === 1001) {
								that.loadings = false
								if(res.data.length != 0) {
									that.reminder = false
									res.data.forEach(function(item, index) {
										item.employeeList.forEach(function(son, num) {
											son.sate = false
										})
									})
									that.addressList = res.data
								} else {
									that.reminder = true
									that.addressList = []
								}
							} else {
								mui.toast('网络请求错误')
							}
						})
					},

					examineClick: function(userID) {
						var dataList = this.addressList
						console.log(userID)
						this.addressList.forEach(function(item, idnex) {
							item.employeeList.forEach(function(son, num) {
								if(userID == son.userID) {
									son.sate = !son.sate
								}
							})
						})
						this.addressList = dataList
					},
					goiponeClick: function(name, ipone) {
						if(ipone) {
							plus.nativeUI.confirm("您要给" + name + "打电话吗？", function(e) {
								if(e.index == 0) {
									dialipone(ipone)
								}
							})
						}
					},
				}
			})
			mui.init()
			mui.plusReady(function() {
				FastClick.attach(document.body);
			})

			function dialipone(ipone) { // 拨打电话方法
				if(ipone) {
					plus.device.dial(ipone, false);
				}
			}
		</script>
	</body>

</html>